<template>
    <div class="movie-detail">
        <div class="loading" v-if="!movie"></div>
        <div v-else>
            <mt-header fixed :title="movie.title">
                <router-link to="/" slot="left">
                    <mt-button icon="back">back</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>
            <div style="padding-top:50px">
                <div class="img-box">
                    <img width="100%" :src="getImages(movie.images.small)" alt="">
                </div>
            </div>
            <div>{{movie.title}}</div>
            <div>{{movie.summary}}</div>
            <p>演员：</p>
            <div
                v-for="cast in movie.casts"
                :key="cast.id"
            >
                <img width="85" height="85" :src="getImages(cast.avatars.small)"/>
                <p>{{cast.name}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import getImages from "@/modules/util-getImages"
export default {
    data(){
        return {
            movie:null
        }
    },
    methods:{
        getImages
    },
    created(){
        this.$http.get("/api/db/movie_detail/"+this.$route.params.id).then(res=>{
            console.log(res.data)
            this.movie = res.data;
        })
    }
}
</script>

<style lang="scss">
    .img-box{
        height:2.4rem;
        img{
            height:100%;
        }
    }
</style>
